$(document).ready(function () {
  initForm()

  //后台传入的 标题列表
  var arr = [{
    id: 1,
    name: "一级标题",
    pid: 0
  }, {
    id: 2,
    name: "二级标题",
    pid: 0
  }, {
    id: 3,
    name: "2.1级标题",
    pid: 2
  }, {
    id: 4,
    name: "2.2级标题",
    pid: 2
  }, {
    id: 5,
    name: "1.1级标题",
    pid: 1
  }, {
    id: 6,
    name: "1.2级标题",
    pid: 1
  }, {
    id: 7,
    name: "1.21级标题",
    pid: 6
  }, {
    id: 8,
    name: "三级标题",
    pid: 0
  }, {
    id: 9,
    name: "1.22级标题",
    pid: 6
  }, {
    id: 10,
    name: "1.221级标题",
    pid: 9
  }, {
    id: 11,
    name: "1.2211级标题",
    pid: 10
  }, {
    id: 12,
    name: "1.2212级标题",
    pid: 10
  }

  ];
  //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
  $(".innerUl").ProTree({
    arr: arr,
    close: true,
    simIcon: "", // 单个标题字体图标 不传默认glyphicon-file
    mouIconOpen: "mdi mdi-chevron-down", // 含多个标题的打开字体图标  不传默认glyphicon-folder-open
    mouIconClose: "mdi mdi-chevron-right", // 含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
    callback: function (id, name) {
      console.log("id：" + id + "，名字：" + name);
    }

  })
})

// 保存
function saveBtn() {
  let formData = $('#formData').serializeArray()
  console.log('formData', formData);
  console.log('校验', validate('#formData'));
}

// 取消
function cancleBtn() {
  // let form = document.getElementById('formData')
  // form.reset()
  // initForm()
}

// init 表单
function initForm() {
  // // 表单下拉选项JSON
  // var selectJosn = [{
  //     name: 'signNation',
  //     elId: '#signNation',
  //     defaultValue: [1],
  //     tips: '请选择',
  //     data: [{
  //         name: '国内',
  //         value: 1
  //       },
  //       {
  //         name: '国外',
  //         value: 2
  //       }
  //     ],
  //     callback: function (data) {
  //       //arr:  当前已选中的数据
  //       var arr = data.arr;
  //       //change, 此次选择变化的数据,数组
  //       var change = data.change;
  //       //isAdd, 此次操作是新增还是删除
  //       var isAdd = data.isAdd;
  
  //       if (!isAdd) {
  //         arr.push(change[0])
  //       }
  //     }
  //   }
  // ]

  // for (var i = 0; i < selectJosn.length; i++) {
  //   var item = selectJosn[i];
  //   initSelect(item)
  // }

  // 校验
  $('#formData').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      // // 名称校验
      // unitName: {
      //   validators: {
      //     notEmpty: {
      //       message: '单位名称不能位空！'
      //     },
      //     // regexp: {
      //     //   regexp: /^[\u0391-\uFFE5A-Za-z]+$/,
      //     //   message: '购机者名称请输入中文或字母！'
      //     // }
      //   }
      // },
      // // 身份证号校验
      // idCrad: {
      //   validators: {
      //     notEmpty: {
      //       message: ' '
      //     },
      //     callback: {
      //       message: '请输入正确的身份证号！',
      //       callback: function (value, validator) {
      //         return isIdCard(value)
      //       }
      //     }
      //   }
      // }
    }
  });
}

// 验证
function validate(id) {
  $(id).data('bootstrapValidator').validate()
  $(id).bootstrapValidator('validate');

  var ispass = false
  ispass = $(id).data('bootstrapValidator').isValid()

  if (!ispass) {
    //没有通过校验
    console.log('未通过');
  } else {
    //通过校验，可进行提交等操作
    console.log('已通过');
  }

  return ispass
}

// init 表单下拉相关
function initSelect(data) {
  xmSelect.render({
    name: data.name, // 表单提交时的 name
    el: data.elId,
    tips: data.tips,
    radio: true, // 是否开启单选
    clickClose: true, // 是否在选择完毕之后关闭下拉菜单
    theme: {
      color: '#409eff',
    },
    model: {
      icon: 'hidden',
      label: {
        type: 'text',
        block: {
          //最大显示数量, 0:不限制
          showCount: 10,
          //是否显示删除图标
          showIcon: false,
        }
      }
    },
    initValue: data.defaultValue,
    data: data.data,
    on: data.callback
  })
}
